<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        let result={
            users:[
                {
                    id:1001,
                    username:"tom",
                    gender:"男",
                    courseName:"Web前端",
                    className:"wbs24011"
                }
            ],
            teacher:"张三",
            school:"南京网博"
        };
        //定义一个函数，将上述对象作为参数解构进去，函数的功能是:
        // 在控制台输出姓名是xx，性别是xx，课程是xx，班级是xx，老师是xx，学校是xx
        function show({users:[{id,username,gender,courseName,className}],teacher,school}){
            console.log("姓名是:"+username+",性别是:"+gender+",课程是:"+courseName+",班级是:"+className+",老师是:"+teacher+",学校是:"+school);
        }
        show(result);
       

       
        var users={
            username:"alice",
            age:20,
            address:[
                {
                    id:1001,
                    addName:"第一故乡南京"
                },
                {
                    id:1002,
                    addName:"第二故乡上海"
                },
                {
                    id:1003,
                    addName:"第三故乡北京"
                }
            ]
        };
        var objs=[
            {
                username:"alice",
                age:20,
                hobby:"打游戏"
            },
            {
                username:"lucy",
                age:22,
                hobby:"旅游"
            },
            {
                username:"cici",
                age:25,
                hobby:"唱歌"
            }
        ];

        // 将上面的数据进行解构，在页面中展示如下：使用DOM操作的方式

        /*
            <div class="d1">
                <div>我的名字叫:alice</div>
                <div>我的年龄:20</div>
                <div>我的故乡:第一故乡南京 第二故乡上海 第三故乡北京</div>
            </div>
            <div class="d2">
                <p>姓名是alice,爱好是打游戏/p>
                <p>姓名是lucy,爱好是旅游</p >
                <p>姓名是cici,爱好是唱歌</p >
            </div>


        */
       window.onload=function(){
            let {username,age,address:[{addName:addName1},{addName:addName2},{addName:addName3}]}=users;
            let d1=document.querySelector(".d1");//根据选择器选择对应标签的DOM对象
            let div1=document.createElement("div");
            div1.innerHTML="我的名字叫:"+username;
            let div2=document.createElement("div");
            div2.innerHTML="我的年龄:"+age;
            let div3=document.createElement("div");
            div3.innerHTML="我的故乡:"+addName1+" "+addName2+" "+addName3;
            d1.appendChild(div1);
            d1.appendChild(div2);
            d1.appendChild(div3);

            let [{username:username1,hobby:hobby1},{username:username2,hobby:hobby2},{username:username3,hobby:hobby3}]=objs;
            let d2=document.querySelector(".d2");
            let p1=document.createElement("p");
            p1.innerHTML="姓名是"+username1+",爱好是"+hobby1;
            let p2=document.createElement("p");
            p2.innerHTML="姓名是"+username2+",爱好是"+hobby2;

            let p3=document.createElement("p");
            p3.innerHTML="姓名是"+username3+",爱好是"+hobby3;
            d2.appendChild(p1);
            d2.appendChild(p2);
            d2.appendChild(p3);

       };
    </script>
</head>
<body>
    <div class="d1"></div>
    <div class="d2"></div>
</body>
</html>